<template>
	<up-navbar>
		<template #left>
			<image src="/static/index-top.png" style="height: 36px;width: auto;" mode="heightFix"></image>
		</template>
	</up-navbar>
	<up-sticky :zIndex="4">
		<view class=" white-bg " :style="{
			padding: `${bottom + 16}px 16px 20px`
		}">
			<up-search @click="toSearch" shape="square" disabled borderColor="#165DFF" bgColor="#fff" height="44px"
				:searchIconSize="26" :showAction="false" placeholder="搜索题库、章节等" v-model="keyword"></up-search>
		</view>
	</up-sticky>

	<view class="area">
		<up-swiper :indicator="true" indicatorMode="dot" :list="indexData.banner" keyName="url" :height="180"
			@click="swiperClick"></up-swiper>
		<view class="u-m-t-40 notice u-flex u-flex-between u-flex-items-center">
			<image src="@/static/message.png" mode="widthFix" style="width: 40rpx;height: auto;"></image>
			<view class="f-s-12 u-m-l-20 msg-text">消息通知</view>
			<view class="_line"></view>
			<u-notice-bar icon="" bgColor="transparent" color="#86909C" fontSize="12px"
				text="百亿吉航无人机驾考宝典正式启动"></u-notice-bar>
		</view>
		<view class="u-m-t-40 menu-grid">
			<view class="menu-item" v-for="app in indexData.app" :key="app.id" @click="toPath(app)">
				<image class="menu-img" :src="app.icon"></image>
				<view class="menu-text">{{ app.name }}</view>
			</view>
		</view>
		<view class="u-m-t-40">
			<up-box height="180px" gap="10px">
				<template #left>
					<view class="box left-box" @click="easyError">
						<image src="@/static/easy-ku.png" class="bg-img" mode="widthFix"></image>
						<view class="f-s-20 f-w-ber">易错99题</view>
						<view class="f-s-12 up-info up-m-t-12">难点整理 考前冲刺</view>
						<view class="to-go up-flex up-flex-items-center">
							<view class="f-s-12 up-m-r-8">GO</view>
							<up-icon name="arrow-rightward" color="#FFF" :size="10"></up-icon>
						</view>
					</view>
				</template>
				<template #rightTop>
					<view class="box right-top-box" @click="errorBook">
						<image src="@/static/error-book.png" class="bg-img" mode="widthFix"></image>
						<view class="box-area">
							<view class="f-s-15 f-w-ber">错题本</view>
							<view class="f-s-10 up-info up-m-t-4">错题自动归纳</view>
							<view class="to-go up-flex up-flex-items-center up-m-t-12">
								<view class="f-s-10 up-m-r-8">GO</view>
								<up-icon name="arrow-rightward" color="#FFF" :size="8"></up-icon>
							</view>
						</view>
					</view>
				</template>
				<template #rightBottom>
					<view class="box right-bottom-box" @click="collection">
						<image src="@/static/shoucang.png" class="bg-img" mode="widthFix"></image>
						<view class="box-area">
							<view class="f-s-15 f-w-ber">收藏夹</view>
							<view class="f-s-10 up-info up-m-t-4">你关注的题型</view>
							<view class="to-go up-flex up-flex-items-center up-m-t-12">
								<view class="f-s-10 up-m-r-8">GO</view>
								<up-icon name="arrow-rightward" color="#FFF" :size="8"></up-icon>
							</view>
						</view>
					</view>
				</template>
			</up-box>
		</view>
		<!-- <view class="u-m-t-40 today-data">
			<view class="problem-num">
				<view class="num">20</view>
				<view class="title">今日做题数</view>
			</view>
			<view class="data-line"></view>
			<view class="rank">
				<view class="rank-num">3</view>
				<view class="rank-title">
					<view class="u-m-r-6">今日排名</view>
					<up-icon name="arrow-rightward" size="22rpx"></up-icon>
				</view>
			</view>
		</view> -->
		<view class="u-m-t-40 up-flex up-flex-items-center">
			<image src="/static/title-icon.png" style="width: 26px;height: auto;" mode="widthFix"></image>
			<view class="f-s-18 f-w-b u-m-l-20">知识点练习</view>
		</view>
		<view class="u-m-t-40 section">
			<ChapterItem v-for="(info,index) in indexData.subject" :key="info.id"
				:line="index < indexData.subject.length - 1" :info="info"></ChapterItem>
		</view>
	</view>
</template>

<script setup>
	import Func from '@/utils/common.js'
	import ChapterItem from '@/components/ChapterItem.vue'
	import {
		ref
	} from 'vue'
	import IndexApi from '@/api/index.js'
	import {
		onShow,
		onTabItemTap,
		onBackPress,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const keyword = ref('')
	// 首页数据
	const indexData = ref({
		banner: [],
		app: [],
		subject: []
	})

	// 开启分享
	onShareAppMessage(() => {
		return {
			title: '百亿吉航无人机驾考宝典',
			path: '/pages/index'
		}
	})

	onTabItemTap(() => {
		SubjectList()
	})

	// onBackPress(() => {
	// 	Func.toast('onBackPress')
	// 	console.info('onBackPress')
	// 	SubjectList()
	// })

	const SubjectList = () => {
		IndexApi.SubjectList().then(resp => {
			indexData.value.subject = resp.data.filter(e => e.quantity > 0).map(e => {
				const percent = (e.completedQuantity / e.quantity) * 100
				e.percent = percent > 100 ? 100 : percent
				return e
			})
		})
	}


	const swiperClick = (e) => {
		const banner = indexData.value.banner[e]
		if (!banner) {
			return
		}
		const type = banner.type
		const path = banner.path
		if(!path){
			return
		}
		
		// 页面跳转
		if (type === 1) {
			uni.navigateTo({
				url: path
			})
			return
		}
		// 视频播放
		if (type === 2) {
			uni.navigateTo({
				url: '/subPackages/bank/Play?videoUrl=' + path
			})
			return
		}
		// 文章
		if (type === 3) {
			uni.navigateTo({
				url: '/subPackages/app/news/linkInfo?link=' + path
			})
			return
		}
	}

	const swiperChange = (e) => {
		current.value = e.detail.current
	}

	const getIndexData = () => {
		IndexApi.data().then(resp => {
			const data = resp.data
			indexData.value.banner = data.banner
			indexData.value.app = data.app
			indexData.value.subject = data.subject.filter(e => e.quantity > 0).map(e => {
				const percent = (e.completedQuantity / e.quantity) * 100
				e.percent = percent > 100 ? 100 : percent
				return e
			})
		})
	}

	const toPath = (e) => {
		const path = e.path
		if (!path) {
			Func.toast('开发ING...')
			return
		}
		if (path == '/pages/bank') {
			uni.switchTab({
				url: path
			})
			return
		}
		uni.navigateTo({
			url: path
		})
	}
	// 易错99题
	const easyError = () => {
		uni.navigateTo({
			url: '/subPackages/subject/99error'
		})
	}
	//错题本
	const errorBook = () => {
		uni.navigateTo({
			url: '/subPackages/subject/errorSet'
		})
	}
	// 收藏夹
	const collection = () => {
		uni.navigateTo({
			url: '/subPackages/subject/collectSet'
		})
	}
	const toSearch = () => {
		uni.navigateTo({
			url: '/pages/search'
		})
	}

	getIndexData()
</script>

<style scoped lang="scss">
	.area {
		padding: 20px 16px;

		.notice {
			height: 88rpx;
			padding: 0 24rpx;
			background: linear-gradient(270deg, #FFFFFF 0%, #EFF5FF 100%);
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			border: 2rpx solid #FFFFFF;

			.msg-text {
				color: #1677FF;
			}

			._line {
				margin: 0 16rpx;
				width: 1rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.06);
			}
		}

		.menu-grid {
			padding: 18px 12px;
			background-color: #ffffff;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 8px;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 20px;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.menu-img {
					width: 48px;
					height: 48px;
				}

				.menu-text {
					font-size: 12px;
					color: #86909C;
					text-align: center;
					margin-top: 6px;
				}
			}
		}

		.today-data {
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			background: linear-gradient(225deg, #FFFFFF 0%, #EFF5FF 100%);
			padding: 20px;
			border-radius: 8px;
			border: 2rpx solid #ffffff;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.problem-num {
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					position: relative;
					font-size: 40px;
					font-weight: 600;

					&::before {
						content: '';
						position: absolute;
						top: 0px;
						left: -8px;
						width: 28px;
						height: 28px;
						background: linear-gradient(300deg, #EBF2FE 0%, #0056FF 100%);
						border-radius: 50%;
						opacity: .2;
					}
				}

				.title {
					font-size: 12px;
					color: #86909C;
					text-align: center;
				}
			}

			.data-line {
				width: 1px;
				height: 40px;
				background: rgba(0, 0, 0, 0.06);
			}

			.rank {
				display: flex;
				flex-direction: column;
				align-items: center;

				.rank-num {
					position: relative;
					font-size: 40px;
					font-weight: 600;

					&::before {
						content: '';
						position: absolute;
						top: 0px;
						left: -8px;
						width: 28px;
						height: 28px;
						background: linear-gradient(300deg, #FFE4BA 0%, #FF9A2E 100%);
						border-radius: 50%;
						opacity: .2;
					}
				}

				.rank-title {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #86909C;
					text-align: center;
				}
			}
		}

		.section {
			padding: 0 16px;
			background-color: #ffffff;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 8px;
		}
	}

	.box {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		position: relative;
		z-index: 2;
	}

	.left-box {
		background: linear-gradient(135deg, #FDCDC5, #FFECE8);
		padding: 20px;
		box-sizing: border-box;

		.bg-img {
			position: absolute;
			width: 72px;
			height: 72px;
			right: 12px;
			bottom: 16px;
			opacity: .4;
			transform: rotate(10deg);
			z-index: 1;
		}

		.to-go {
			position: absolute;
			left: 20px;
			bottom: 40px;
			background: #F55757;
			padding: 3px 6px;
			border-radius: 4px;
			color: #ffffff;
		}
	}

	.right-top-box {
		background: linear-gradient(135deg, #FFF7E8, #FFE4BA);

		.bg-img {
			position: absolute;
			width: 42px;
			height: 42px;
			right: 18px;
			bottom: 20px;
			opacity: .4;
			transform: rotate(-10deg);
			z-index: 1;
		}

		.box-area {
			position: absolute;
			top: 10px;
			left: 20px;


			.to-go {
				background: #FF9A2E;
				padding: 2px 4px;
				border-radius: 4px;
				color: #ffffff;
				width: min-content;
			}
		}
	}

	.right-bottom-box {
		background: linear-gradient(135deg, #E8FFEA, #AFF0B5);
		box-sizing: border-box;

		.bg-img {
			position: absolute;
			width: 42px;
			height: 42px;
			right: 18px;
			bottom: 20px;
			opacity: .4;
			transform: rotate(-10deg);
			z-index: 1;
		}

		.box-area {
			position: absolute;
			top: 10px;
			left: 20px;

			.to-go {
				background: #00B42A;
				padding: 2px 4px;
				border-radius: 4px;
				color: #ffffff;
				width: min-content;
			}
		}
	}

	::v-deep .u-notice-bar {
		padding: 0 !important;
	}
</style>